<template>
  <div class="container">
    <div class="name">
      乾
    </div>
    <div>
      <Yao 
        class="yao"
        v-for="yao in finalList"
        :key="yao.id"  
        :type="yao.type"
        :title="yao.title"
      />
    </div> 
  </div>  
</template>

<script>
import Yao from './Yao.vue'

export default {
  components: { Yao },
  props:['yaoList'],

  computed: {
    finalList(){
      const temp = JSON.parse(JSON.stringify(this.yaoList))
      temp.forEach((yao, index) => {
        yao.title = this.getTitle(index + 1, yao.type)
      })
      return temp.reverse()
    }
  },

  methods: {
    getTitle(index, type){
      const nameMap = {
        1: '初',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '上'
      }
      const secondName = (type == 2 ? '九' : '六')
      const firstName = nameMap[index]
      if(index === 1 || index === 6){
        return firstName + secondName
      }else{
        return secondName + firstName
      }
    }
  }
}
</script>

<style scoped>
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  width: 300px;
  height: 400px;
  /* border: 1px solid red; */
}

.name {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
}

.yao {
  margin-bottom: 25px;
}
</style>